<template>
  <input
    type="text"
    :value="qwe"
    @input="emit('update:qwe', (<HTMLInputElement>$event.target).value)"
  />
  <br />
  <input
    type="text"
    :value="asd"
    @input="emit('update:asd', (<HTMLInputElement>$event.target).value)"
  />
  <!-- HTML标签拿到$evet是DOM事件对象可以用.target  -->
</template>

<script setup lang="ts" name="xiaojiInput">
import { ref, reactive } from "vue";
defineProps(["qwe", "asd"]);
const emit = defineEmits(["update:qwe", "update:asd"]);
</script>

<style scoped>
/* 整体输入框样式 */
input {
  /* 边框样式，1px 宽的实线，颜色为灰色 */
  border: 1px solid #ccc;
  /* 边框圆角，让输入框边角变圆 */
  border-radius: 4px;
  /* 内边距，让输入内容与边框有一定距离 */
  padding: 8px;
  /* 字体大小 */
  font-size: 14px;
  /* 过渡效果，让边框变化更平滑 */
  transition: border-color 0.3s ease;
}

/* 鼠标悬浮时的样式 */
input:hover {
  border-color: #999;
}

/* 输入框获得焦点时的样式 */
input:focus {
  /* 去除默认的蓝色边框 */
  outline: none;
  /* 改变边框颜色为蓝色，突出选中状态 */
  border-color: #007bff;
  /* 添加一个轻微的阴影效果 */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}
</style>
